<template>
    <div>
        <!-- 面包屑区域 -->
        <bread-detail :category="infoobj.categories" :name="infoobj.name"></bread-detail>
        <!-- 商品基本信息区域 -->
        <div class="goods-info">
            <div class="media">
                <goods-image :imgarr="infoobj.mainPictures"></goods-image>
                <goods-sales></goods-sales>
            </div>
            <div class="spec">
                <goods-name :name="infoobj.name" :desc="infoobj.desc" :price="skuobj.price||infoobj.price" :oldPrice="skuobj.oldPrice"></goods-name>
                <!-- 规格 -->
                <goods-sku :specs="infoobj.specs" :skus="infoobj.skus" @send="getSkuData"></goods-sku>
                <!-- 数量 -->
                <!-- <xtx-numbox></xtx-numbox>
                <button class="btn">加入购物车</button> -->
            </div>
        </div>
        <!-- 同类商品推荐区域 -->
        <goods-relevant :goodsId="infoobj.id"></goods-relevant>
        <!-- 商品详情区域 -->
        <div class="goods-footer">
            <div class="goods-article">
                <!-- 商品+评价 -->
                <GoodsTab :infoobj="infoobj" />
                <!-- 注意事项 -->
                <div class="goods-warn">
                    <GoodsWarn />
                </div>
            </div>
            <!-- 24热榜+专题推荐 -->
            <div class="goods-aside">
                <GoodsHot :goodsId="infoobj.id" :type="'24小时热销榜'" />
                <GoodsHot :goodsId="infoobj.id" :type1="'周热销榜'" />
            </div>
        </div>
    </div>
</template>

<script>
import { getDetail } from '@/utils/api/detail';
import BreadDetail from './BreadDetail.vue';
import GoodsImage from './GoodsImage.vue';
import GoodsName from './GoodsName.vue';
import GoodsSales from './GoodsSales.vue';
import GoodsSku from './GoodsSku.vue';
// import XtxNumbox from '../utils/XtxNumbox.vue';
import GoodsRelevant from './GoodsRelevant.vue';
import GoodsTab from './GoodsTab.vue'
import GoodsHot from './GoodsHot.vue'
import GoodsWarn from './GoodsWarn.vue'
    export default {
        components: { BreadDetail, GoodsImage, GoodsName, GoodsSales, GoodsSku,
            //  XtxNumbox, 
             GoodsRelevant, GoodsTab,
          
          GoodsHot, 
          GoodsWarn 
        
        },
        data(){
            return{
                infoobj:{},
                skuobj:{}
            }
        },
       mounted(){
          this.getDetailList(this.$route.query.id)
       
        },
        methods:{
            async getDetailList(id){
                let res=await getDetail(id)
                console.log(res);
                this.infoobj=res.result
            },
            //接受从规格组件传递的数据
            getSkuData(obj){
                this.skuobj = obj
                console.log(obj);
            }
        }
    }
</script>

<style scoped lang="scss">
.goods-info {
  min-height: 600px;
  background: #fff;
  display: flex;
  .media {
    width: 580px;
    height: 600px;
    padding: 30px 50px;
  }
  .spec {
    flex: 1;
    padding: 30px 30px 30px 0;
    .btn{
        margin-top:20px;
        height: 50px;
        width: 180px;
        border-radius: 5px;
        font-size: 18px;
        color: white;
        background-color:#27ba9b;
        border: none;
    }
  }
}
.goods-warn {
  min-height: 600px;
  background: #fff;
}
.goods-footer {
  display: flex;
  margin-top: 20px;
  .goods-article {
    width: 940px;
    margin-right: 20px;
  }
  .goods-aside {
    width: 280px;
    min-height: 1000px;
    // background: red;
  }
}
</style>